<template>
  <div style="height: 100%; background: white">
    <el-container>
      <el-header class="homeHeader">
        <div class="title" style="color: white; font-size: 18px; float: left">
          <div style="width: 550px; margin-bottom: 14px">
            <img
                src="@/assets/shop.png"
                alt=""
                style="width: 45px; position: relative; top: 9px; left: 10px"
            />
            <span style="margin-left: 15px; font-size: 24px" class="title-text"
            >商城后台管理系统</span
            >
          </div>
        </div>

        <div>
          <el-button
              icon="el-icon-bell"
              type="text"
              style="margin-right: 8px; color: #00b5ad"
              size="normal"
          ></el-button>

          <el-dropdown class="userInfo" @command="commandHandler">
            <span class="el-dropdown-link" style="color: white;font-family: '宋体';font-size: 18px">
              欢迎回来，亲爱的<span style="margin-left: 4px">  {{ username }}</span><i></i>
            </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout"
              >注销登录
              </el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside :style="{ width: widthVal }">
          <el-row>
            <el-col :span="24">
              <div class="sidebar">
                <el-menu
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    router
                    class="el-menu-vertical-demo1"
                    background-color="#1e3243"
                    text-color="#fff"
                    active-text-color="#edb102"
                >
                  <el-menu-item
                      :route="{
                      path: '/home',
                    }"
                      index="home"
                  >
                    <i
                        class="iconfont"
                        style="margin-right: 7px;margin-left: 5px; font-weight: 100"
                    >&#xe7b8;</i
                    >
                    <span>首页</span>
                  </el-menu-item>
                  <el-menu-item
                      :route="{
                      path: '/mana/swiper',
                    }"
                      index="mana/swiper"
                  >
                    <i
                        class="el-icon-full-screen"
                        style="margin-right: 4px; font-weight: 100"
                    ></i
                    >
                    <span>轮播图管理</span>
                  </el-menu-item>

                  <el-menu-item
                      :route="{
                      path: '/mana/goodsMana',
                    }"
                      index="mana/goodsMana"
                  >
                    <i
                        class="iconfont"
                        style="margin-right: 7px;margin-left: 5px; font-weight: 100"
                    >&#xe74e;</i
                    >
                    <span>商品管理</span>
                  </el-menu-item>
                  <el-menu-item
                      :route="{
                      path: '/mana/ordersMana',
                    }"
                      index="mana/ordersMana"
                  >
                    <i
                        class="iconfont"
                        style="margin-right: 7px;margin-left: 5px; font-weight: 100"
                    >&#xe8ae;</i
                    >
                    <span>订单管理</span>
                  </el-menu-item>
                  <el-menu-item
                      :route="{
                      path: '/mana/customerinfoMana',
                    }"
                      index="mana/customerinfoMana"
                  >
                    <i
                        class="iconfont"
                        style="margin-right: 7px;margin-left: 5px; font-weight: 100"
                    >&#xe613;</i
                    >
                    <span>客户管理</span>
                  </el-menu-item>
                  <el-menu-item
                      :route="{
                      path: '/mana/categoryMana',
                    }"
                      index="mana/categoryMana"
                  >
                    <i
                        class="iconfont"
                        style="margin-right: 7px;margin-left: 5px; font-weight: 100"
                    >&#xe62f;</i
                    >
                    <span>分类管理</span>
                  </el-menu-item>
                </el-menu>
              </div>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>

        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
import Cookies from "js-cookie";

export default {
  name: "Layout",
  data() {
    return {
      username: "",
      isCollapse: false,
      widthVal: "200px",
      items: [
        {
          path: {path: "/mana"},
          title: "数据管理",
          icon: "el-icon-eleme",
        },
      ],
      activeIndex: 0,
    };
  },
  created() {
    this.getUserData()
  },
  methods: {
    getUserData() {
      var userInfo = JSON.parse(Cookies.get("userInfo"))
      this.username = userInfo.username
    },
    navigation(item, index) {
      this.activeIndex = index;
      let route = item.path;
      this.$router.push({
        path: route.path,
      });
    },
    logout() {
      Cookies.remove("userInfo");
      Cookies.remove("token");
      this.$router.push("/login");
    },
    collapseChange() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.widthVal = "80px";
      } else {
        this.widthVal = "200px";
      }
    },
    commandHandler(cmd) {
      if (cmd === "logout") {
        this.$confirm("此操作将注销登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
            .then(() => {
              this.logout();
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消操作",
              });
            });
      }
    },
  },
};
</script>

<style scoped>
/* 配色方案:
背景:7dbfff,
图标&标签:4298e7,
遮罩:e4f2ff */
.el-header {
  position: relative;
  width: 100%;
  height: 30px;
}

.el-aside {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
}

.el-main {
  position: absolute;
  left: 200px;
  right: 0;
  top: 20px;
  bottom: 0;
  overflow-y: scroll;
}

#nav-tab {
  position: relative;
  right: 200px;
  margin-top: 10px;
  width: 300px;
  height: 60px;
  /* background-color: #fff; */
  background: transparent;
  display: flex;

  border-radius: 20px 20px 20px 20px;

  overflow: hidden;

}

.nav-tab-item {
  width: 130px;
  height: 100%;

  z-index: 2;
  transition: 0.3s;
  cursor: pointer;

  /* 居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-tab-item.active {
  width: 210px;
}

.nav-tab-item_icon {
  font-size: 32px;
  color: #4298e7;
  transition: 0.3s;
  transform: translate(0, 0px);
}

.active .nav-tab-item_icon {
  transform: translate(0, -10px);
}

.nav-tab-item_label {
  font-size: 20px;
  color: #4298e7;
  opacity: 0;
  transition: 0.3s;
  user-select: none;
}

.active .nav-tab-item_label {
  opacity: 1;
}

.nav-tab-overlay {
  position: absolute;
  left: 0;
  top: 0;

  height: 100%;
  width: 210px;

  /* background-color: #e4f2ff; */
  border-radius: 20px;

  transition: 0.3s;
}

/* 一部分 */
.title-text {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 6px;
  width: 100%;
  background: linear-gradient(
      92deg,
      #0072ff 0%,
      #00eaff 48.8525390625%,
      #01aaff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.collapse-btn {
  float: left;
  padding: 0 10px;
  cursor: pointer;
  color: white;
  font-size: 20px;
}

.el-menu-vertical-demo1:not(.el-menu--collapse) {
  width: 200px;
  list-style-type: none;
  top: 60px;
  margin: 0;
  padding: 0;
  height: 100%;
  position: fixed;
  overflow: auto;
}

.homeHeader {
  display: flex;
  background-color: #262f3e;
  position: fixed;
  top: 0;
  z-index: 200;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}

.el-dropdown-link img {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  vertical-align: middle;
  margin-left: 8px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
}

.el-main {
  margin-top: 60px;
}

.sidebar > ul {
  height: 100%;
  top: 60px;
  margin: 0;
  padding: 0;
  overflow: auto;
  position: fixed;
}

body {
  background: url("../assets/so-white.png");
}
</style>
